<template>
  <div class="articelContent">
    <el-scrollbar height="100vh" @scroll="handleScroll" ref='scrollbarRef'>
      <card :info="data.info"/>
      <svg class="icon btn" aria-hidden="true" v-if="isshowdong" @click="handleTop">
          <use xlink:href="#icon-fanhuidingbu"></use>
      </svg>
    </el-scrollbar>
  </div>
</template>

<script setup>
import card from '@/components/card.vue'
import {reactive,ref} from 'vue'
const scrollbarRef = ref()
const currentScrollbarHeight = ref(0)
const isshowdong = ref(false)
const data = reactive({
  info:{
    show:false,
    path:'artDetail'
  }
})
const handleScroll =(a)=>{
  
  currentScrollbarHeight.value = a.scrollTop
  if(a.scrollTop === 0){
      isshowdong.value = false
    }else{
      isshowdong.value = true
    }
}
const handleTop = (a)=>{
  // 500 / 10 =  50每次滚动减少的值
  //  500 - 50 = 450 第一次滚动的值  450 - 50 = 400 第二次滚动的值...
  let tempHeight = currentScrollbarHeight.value  // 总高度
  let perDecrementHeight = tempHeight / 60  // 每次减少高度
  let timer = setInterval(() => {
    tempHeight -= perDecrementHeight
    // 如果小于等于0，就滚动到0，并且清楚定时器
    if (tempHeight <= 0) {
      scrollbarRef.value.setScrollTop(0)
      clearInterval(timer)
      return
    }
    // 否则就减少n个单位
    scrollbarRef.value.setScrollTop(tempHeight)
  }, 300 / 60)  // 16.6666667
}
</script>

<style lang="scss" scoped>
.articelContent {
  .el-card {
    background-color: #ffffff62;
    .footeRecord{
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .btn{
    cursor: pointer;
    position: fixed;
    right: 50px;
    bottom: 20px;
  }
  .icon{
    width: 35px;
    height: 35px;
  }
}
.box-card {
  margin-bottom: 10px;
  --el-card-padding: 10px;
  .font {
    color: var(--el-text-color-primary);
    font-size: 12px;
  }
  .userinfo {
    display: flex;
    align-items: center;
    margin: 10px;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    span {
      margin: 0 10px;
    }
    
  }
}

</style>